<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>R Notebook: A knitr app on OpenCPU</title>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <!-- Styles for R syntax highlighter -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/github.min.css">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <style type="text/css">
    textarea {
      font-size: 12px;
      font-family: 'DejaVu Sans Mono', 'Droid Sans Mono', 'Lucida Console', Consolas, Monaco, monospace;
      width: 99%;
    }
  </style>
<!-- R syntax highlighter -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/languages/r.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

</head>
<body>
<div class="container">
<form action="https://public.opencpu.org/ocpu/library/base/R/identity/json" method="POST" id="knitForm">
<textarea name="x" class="form-control" rows=10></textarea>
<div><button type="button" class="btn btn-primary" id="knit"><span class="glyphicon glyphicon-play"></span> Convert</button></div>
<!-- the knitting result will be rendered inside this div -->
<div id="result"></div>
</form>
</div>
<script>
$('textarea[name="x"]').val('Start typing here...\n\n```{r test, fig.width=4, fig.height=4}\n# write R code here\npar(mar = c(4, 4, .1, .1))\nsmoothScatter(rnorm(500), rnorm(500))\n```\n\nThe value of pi is `r pi`.');

$('#knit').click(function() {
  $(this).attr('class', 'btn disabled');
  $('#knitForm').submit();
});
/* attach a submit handler to the form */
$('#knitForm').submit(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get some values from elements on the page: */
  var $form = $( this ),
      term = $form.find('textarea[name="x"]').val().replace(/\\/g, '\\\\').replace(/"/g, '\\"'),
      url = $form.attr('action'),
      rcode = 'library(knitr)\n' +
              'knit2html(text = "' + term + '", template = FALSE)';
  /* Send the data using post and put the results in a div */
  $.post(url, { x: rcode },
    function( data ) {
        $("#result").html(data[0]);
        $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
    })
    .complete(function() {$('#knit').attr('class', 'btn btn-primary');})
    .error(function() { alert("An error occurred!"); });
});
</script>

</body>
</html>
